<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #f8f8f8;
}

/* 公共样式 */
.w100{
  width: 100%;
}
.h100{
  height: 100%;
}
.positionRe {
  position: relative;
}
.positionAb {
  position: absolute;
}
.flex_row {
  display: flex;
  flex-direction: row;
}
.flex_col {
  display: flex;
  flex-direction: column;
}
.flex1 {
  flex: 1;
}
.flex1_5 {
  flex: 1.5;
}
.flex2 {
  flex: 2;
}
.flex2_5 {
  flex: 2.5;
}
.flex3 {
  flex: 3;
}
.flex4 {
  flex: 4;
}
.flex5 {
  flex: 5;
}
.flex6 {
  flex: 6;
}
.flex_jc_cen {
  justify-content: center;
}
.flex_ji_cen {
  justify-items: center;
}
.flex_ac_cen{
  align-content: center;
}
.flex_ai_cen{
  align-items:center
}


/* padding */
.p20{
  padding: 20px;
}
.pdt5 {
  padding-top: 5px;
}
.pdt10 {
  padding-top: 10px;
}
.pdt12 {
  padding-top: 12px;
}
.pdt20 {
  padding-top: 20px;
}
.pb100{
  padding-bottom: 100px;
}

/* margin */
.mt5 {
  margin-top: 5px;
}
.mt8{
  margin-top: 8px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}

.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.mr48 {
  margin-right: 48px;
}

.ml5{
  margin-left: 5px;
}
.ml15{
  margin-left: 15px;
}

.mb100{
  margin-bottom: 100px;
}
</style>
<style lang="less">
/* 公共样式 */
/* 底部tab */
.flex(@flex,@direction) {
  display: @flex;
  flex-direction: @direction;
  flex-wrap: wrap;
}
.bottom {
  border-top: 1px solid #d6d6d6;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .flex(flex,row);
  .flex {
    flex: 1;
    text-align: center;
    background: #fff;
    a {
      color: #7d7d7d;
    }
    .txt {
      display: block;
      font-size: 12px;
    }
    .icon {
      width: 18px;
      height: 17px;
      display: block;
      margin: 9px auto 2px;
      &.icon-home {
        width: 17px;
        height: 18px;
        background: url("~src/assets/images/personCenter/icon_home.png")
          no-repeat;
        background-size: 100% auto;
      }
      &.icon-order {
        width: 20px;
        height: 20px;
        background: url("~src/assets/images/personCenter/icon_order.png")
          no-repeat;
        background-size: 100% auto;
      }
      &.icon-my {
        background: url("~src/assets/images/common/icon_my.png") no-repeat;
        background-size: 100% auto;
      }
    }
    &.active {
      a {
        color: #4b81ff;
      }
      .icon-home {
        background: url("~src/assets/images/personCenter/icon_home_light.png")
          no-repeat;
        background-size: 100% auto;
      }
      .icon-order {
        background: url("~src/assets/images/personCenter/icon_order_light.png")
          no-repeat;
        background-size: 100% auto;
      }
      .icon-my {
        background: url("~src/assets/images/common/icon_my_active.png")
          no-repeat;
        background-size: 100% auto;
      }
    }
  }
}
</style>
